<template>
	<view>
	  <uni-popup ref="infoPopup" background-color="#fff" :is-mask-click="false">
	   <view class="popup-content">
		   <scroll-view scroll-y="true" class="scroll_view_style">
		   <!-- 按钮 -->
		   <view class="headerPage">
			   <button @click="back" size="mini" class="cancel">取消</button>
			   <button @click="submitForm" size="mini" class="next">确认发起签约</button>
		   </view>
		   <view style="margin-top: 100rpx;">
		   <uni-notice-bar text="请确认签约信息无误后，点击下方【确认发起签约】按钮，即可成功发起合同，发起后，请尽快完成签署！" v-if="!isType" />
		   <view v-else>
		   	 <uni-notice-bar text="请确认签约信息无误后，点击下方【确认发起签约】按钮，即可成功发起合同，发起后，请尽快完成签署！" v-if="hasType" />
		   	 <uni-notice-bar text="请确认签约信息无误后，点击下方【确认发起签约】按钮，即可成功发起合同，发起后，请等待授权人完成签署！" v-else />
		   </view>
		   
		   <view style="padding: 0 10rpx;">
		   <!-- 合同信息 -->
		   <view class="item-block">
		   	<p class="contract_name">合同名称：{{contractInfo.name}}</p>
		   	<p class="contract_date">签署截止日期：{{contractInfo.signExpiryDate}}</p>
		   </view>
		   
		   <!-- 发起方 -->
		   <view class="item-block">
		   	<view class="header">
		   		<view class="title">
		   			<i class="iconfont headerIcon">&#xe68d;</i>
		   			<span>发起方</span>
		   		</view>
		   	</view>	
		   	<!-- signerType 0企业 1个人 -->
		   	<view class="grey-color" v-if="startFrom.contractSignFlowStarter.signerType == 0">
		   		<view>
		   			<i class="iconfont themeColor titleIcon">&#xe61b;</i>
		   			<span class="sign_name">{{ startFrom.contractSignFlowStarter.signCompany }}</span>
		   			<companyGreen v-if="startFrom.contractSignFlowStarter.iscertCom == 1" class="certiyImg" />
		   			<companyGray v-else class="certiyImg" />
		   		</view>
		   	</view>
		   	<!-- 个人 -->
		   	<view class="grey-color" v-if="startFrom.contractSignFlowStarter.signerType == 1">
		   		<i class="iconfont themeColor titleIcon">&#xe61b;</i>
		   		<span class="sign_name">{{ startFrom.contractSignFlowStarter.signerName }}</span>
		   		<personalGreen v-if="startFrom.contractSignFlowStarter.iscertPeo == 1" class="certiyImg" />
		   		<personalGray v-else class="certiyImg" />
		   		<span>{{startFrom.contractSignFlowStarter.signerMobile}}</span>
		   	</view>	
		   </view>
		   
		   <!-- 签约方 -->
		   <view class="item-block">
		   	<view class="header">
		   		<view class="title">
		   			<i class="iconfont headerIcon">&#xe634;</i>
		   			<span>签约方</span>
		   		</view>
		   		<view class="flex_between">
		   			<!-- 人脸 -->
		   			<uni-data-checkbox multiple v-model="faceVal" :localdata="faceItem" @change="changeFace" />
		   			<span v-if="contractInfo.signSortType == 0" class="text-span">顺序签</span>
		   			<span v-if="contractInfo.signSortType == 1" class="text-span">无序签</span>
		   			<span class="setting-span" @click="subsequence"><i class="iconfont grayIcon">&#xe8d4;</i></span>
		   		</view>
		   	</view>	
		   	<view v-for="flow,index in tableData" :key="index">
		   		<view class="grey-color" v-if="flow.signerType == 0">
		   			<view>
		   				<span v-if="contractInfo.signSortType==0" class="round_contractInfo">{{index + 1}}</span>
		   				<i class="iconfont themeColor titleIcon">&#xe61b;</i>
		   				<span class="sign_name">{{ flow.signCompany }}</span>
		   				<companyGreen v-if="flow.iscertCom == 1" class="certiyImg" />
		   				<companyGray v-else class="certiyImg" />
		   			</view>
		   			<view class="flex_between" style="margin-left: 42rpx;">
		   				<view>经办人：{{ flow.signerName }}
		   				<personalGreen v-if="flow.iscertPeo == 1" class="certiyImg" />
		   				<personalGray v-else class="certiyImg" />
		   				{{ flow.signerMobile }}</view>
		   				
		   			</view>
		   			<view style="display: flex;margin-left: 42rpx;">
		   				<view>
		   					<i class="iconfont greenIcon" v-if="contractInfo.isFace==1">&#xe69a;</i>
		   					<i class="iconfont grayIcon" v-else>&#xe69a;</i><span class="sign_name" :style="contractInfo.isFace==1?'color:#000':'color:#777'">人脸核身</span></span>
		   				</view>
		   				<view class="right-block"><i class="iconfont greenIcon">&#xe69e;</i><span class="sign_name">盖印章及签字章</span></view>
		   			</view>
		   		</view>
		   		<!-- 个人 -->
		   		<view class="grey-color" v-if="flow.signerType == 1">
		   			<view class="flex_between">
		   				<view>
		   					<span v-if="contractInfo.signSortType==0" class="round_contractInfo">{{index + 1}}</span>
		   					<i class="iconfont themeColor titleIcon">&#xe8c8;</i>
		   					<span class="sign_name">{{ flow.signerName }}</span>
		   					<personalGreen v-if="flow.iscertPeo == 1" class="certiyImg" />
		   					<personalGray v-else class="certiyImg" />
		   					<span>{{flow.signerMobile}}</span>
		   				</view>
		   				
		   			</view>
		   			<view style="display: flex;margin-left: 42rpx;">
		   				<view>
		   					 <i class="iconfont greenIcon" v-if="contractInfo.isFace==1">&#xe69a;</i>
		   					 <i class="iconfont grayIcon" v-else>&#xe69a;</i><span class="sign_name" :style="contractInfo.isFace==1?'color:#000':'color:#777'">人脸核身</span></span>
		   				</view>
		   				<view class="right-block"><i class="iconfont greenIcon">&#xe69e;</i><span class="sign_name">盖个人签字章</span></view>
		   			</view>
		   		</view>	
		   		
		   	</view>	
		   </view>
		   
		   <!-- 抄送人 -->
		   <view class="item-block">
		   	<view class="header">
		   		<view class="title">
		   			<i class="iconfont headerIcon">&#xe6ea;</i>
		   			<span>抄送人</span>
		   		</view>
		   	</view>	
		   	<view v-if="copytableData != ''">
		   		<view v-for="item,index in copytableData">
		   		<view class="grey-color" v-if="item.senderType == 0">
		   			<view>
		   				<span class="sign_name">{{ item.sendCompany }}</span>
		   				<companyGreen v-if="item.companyISCertify == 1" class="certiyImg" />
		   				<companyGray v-else class="certiyImg" />
		   			</view>
		   			<view>
		   				<span class="sign_name">{{ item.sendName }}</span>
		   				<personalGreen v-if="item.isCertify == 1" class="certiyImg" />
		   				<personalGray v-else class="certiyImg" />
		   				<span>{{item.sendMobile}}</span>
		   			</view>
		   		</view>
				
		   		<view class="grey-color" v-else>
		   			<view>
		   				<span class="sign_name">{{ item.sendName }}</span>
		   				<personalGreen v-if="item.isCertify == 1" class="certiyImg" />
		   				<personalGray v-else class="certiyImg" />
		   				<span>{{item.sendMobile}}</span>
		   			</view>
		   		</view>
		   		</view>
		   	</view>	
		   	<view class="grey-color" v-else>
		   		<view>暂无数据</view>
		   	</view>
		   </view>
		   
       </view>
	   </view>
	   </scroll-view>
	   </view>
	  </uni-popup>
	</view>
</template>

<script>
	import {selectListPermiss} from "@/api/ec/console/seal/staffSeal";
	import {getContractSignDetail,getContractCopy} from "@/api/ec/work/contract/contract";
	import {isCertStaff} from "@/api/ec/work/staff/staff";
	import {isCertCompany} from "@/api/ec/work/company/company";
	import companyGray from "@/components/svg/companyGray"
	import companyGreen from "@/components/svg/companyGreen"
	import personalGray from "@/components/svg/personalGray"
	import personalGreen from "@/components/svg/personalGreen"
	export default {
		components: {companyGray,personalGray,personalGreen,companyGreen},
		props:{
			contractInfo: {
			      type: Object,
			    },
			contractFlow: {
			  type: Array,
			},    
		},
		data() {
		  return {
		    faceVal: '',//人脸val
		    faceItem: [{
		      text: '人脸核身',
		      value: 0
		    }],
		    isType: this.$store.getters.staffInfo.company, // 判断身份信息 个人还是企业 true企业  false个人
		    startFrom: {
		      contractSignFlowStarter: {},
		      contractSignFlowList: [{
		        contractTypeName: null,
		        businessTypeName: null
		      }]
		    }, //签署流程
		    copytableData: null, //抄送人信息
		    hasType: '',//使用权限
		    tableData: [],
		  }
		},
		methods: {
			openDialog(){
				this.initData(this.contractInfo.id)
				
				this.tableData = this.contractFlow;
				// 人脸核身显示
				if(this.contractInfo.isFace == 1){
					this.faceVal = [0]
				}
				// 签署顺序设置 signSortType 0顺序 1无序
				uni.$on('signOrder',data => {
					this.tableData = data.tableData
					this.contractInfo.signSortType = data.setVal    			
				})
				// 查询当前流程人员或者企业认证状态
				this.getCertInfo();
				this.$refs.infoPopup.open('bottom')
			},
			/** 签署顺序设置 */
			subsequence() {
				uni.navigateTo({
					url: '/pages/sign/orderSet?tableData=' + JSON.stringify(this.tableData)+'&signSortType='+this.contractInfo.signSortType
				})
			},
			/** 人脸核身 */
			changeFace(e){
				if(e.detail.value.length == 1){
					this.contractInfo.isFace = 1
				}else{
					this.contractInfo.isFace = 0
				}
			},
			/** 确认发起签约 */
			submitForm(){
				this.$emit("submit"); 
				this.back()
			},
			back(){
				this.$refs.infoPopup.close()
			},
			/** 查询当前流程人员或者企业认证状态 */ 
			getCertInfo() {
				let staffIds = this.tableData.map(e => e.systemStaffId);
				let companyIds = this.tableData.map(e => e.systemCompanyId);
				// 个人认证状态
				isCertStaff(staffIds).then(response => {
					this.tableData.forEach(e => {
						response.data.forEach(data => {
							if (e.systemStaffId == data.id) {
								e.iscertPeo = data.isCert;
								e.signerMobile = data.mobile;
							}
						})
					})
				});
				// 企业认证状态
				isCertCompany(companyIds).then(response => {
					this.tableData.forEach(e => {
						response.data.forEach(data => {
							if (e.systemCompanyId == data.id) {
								e.iscertCom = data.isCert;
							}
						})
					})
				});
				console.log(this.tableData)
			},
			initData(contractId) {
				this.copytableData = []
				getContractSignDetail(contractId).then((response) => {
					this.startFrom = response.data;
				});
				// 查询合同抄送
				getContractCopy(contractId).then(async (response) => {
					if (Object.keys(response.data).length > 0) {
						this.copytableData = response.data;
					}
				});
				// 印章使用权限
				selectListPermiss().then((response) => {
					this.hasType = response.data
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content{
		height: 1100rpx;
		overflow-x: hidden;
		background: #fff;
		
		.scroll_view_style {
		  height: 100%;
		}
	}
	
	.headerPage{
		position: fixed;
		top: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #e6f6ef;
		padding: 20rpx 30rpx;
		.cancel{
			background: #fff;
			color: $uni-color-primary;
			border: solid 1rpx $uni-color-primary;
			height: 60rpx;
			line-height: 60rpx;
		}
		.next{
			background: $uni-color-primary;
			color: #fff;
			border: solid 1rpx $uni-color-primary;
			height: 60rpx;
			line-height: 60rpx;
		}
		
	}
	.round_contractInfo{
	  width: 32rpx;
	  height: 32rpx;
	  line-height: 32rpx;
	  border-radius:50%;
	  text-align: center; 
	  display: inline-block;
	  margin-right: 10rpx;
	  color: #fff;
	  background: $uni-color-primary;
	}
	.add_btn{
		background: $uni-color-primary;
		border: 1rpx solid #eee;
		color: #fff;
	}
	::v-deep .uni-navbar__header-btns-left {
	  width: 240rpx !important;
	}
	
	::v-deep .uni-navbar__header-btns-right {
	  width: 420rpx !important;
	}
	.greenIcon{
	  color: #00a660;
	  font-size: 24rpx;
	}
	.grayIcon{
	  color: #666;
	  font-size: 24rpx;
	}
	.right-block{
		margin-left: 30rpx;
	}
	.setting-span{
		color: $uni-color-primary;
	}
	.text-span{
		color: #666;
		.iconfont{
			margin-right: 4rpx;
			font-size: 24rpx;
		}
	}
	.header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		::v-deep .uni-data-checklist .checklist-group .checklist-box{
			margin-right: 40rpx;
		}
	}
	.sign_name {
		padding: 0 0 0 6rpx;
	}

	.titleIcon {
		font-size: 26rpx;
	}

	.contract_name {
		font-size: 30rpx;
		font-weight: 550;
	}

	.contract_date {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	.grey-color {
		background: #f1f1f1;
		padding:14rpx 20rpx;
		margin: 16rpx 0 30rpx 0;
		view{
			line-height: 48rpx;
		}
	}

	.certiyImg {
		width: 28rpx;
		height: 30rpx;
		display: inline-block;
		margin: 0 5rpx 12rpx 5rpx;
		vertical-align: middle;
	}

	.item-block {
		padding: 10rpx 30rpx 30rpx;
	}

	.title {
		font-size: 30rpx;
	}

	.headerIcon {
		background: $uni-color-primary;
		color: #fff;
		border-radius: 50%;
		text-align: center;
		font-size: 20rpx;
		margin-right: 8rpx;
		padding: 8rpx;
	}
	
	::v-deep .uni-noticebar{
		padding: 10rpx 16rpx !important;
	}

	page {
		background: $uni-bg-color;
	}
</style>